<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreServiceFactory" %>
<%@ page import="com.google.appengine.api.datastore.DatastoreService" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Entity" %>
<%@ page import="com.google.appengine.api.datastore.FetchOptions" %>
<%@ page import="com.google.appengine.api.datastore.Key" %>
<%@ page import="com.google.appengine.api.datastore.KeyFactory" %>
<%@ page import="com.google.appengine.api.datastore.Query" %>
<%@ page import="com.google.appengine.api.datastore.Query.FilterOperator" %>

<!-- Redirect to the login page if there is no session created -->
<%
if (session.getAttribute("username") == null) {
	response.sendRedirect("/login.jsp");
}
%>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		 <title>Document Collection | Media Vault</title>
	
		<!--icon-->
		<link rel="icon" href="images/mv.ico" type="">
		
		<!--Common Files-->
       	<jsp:include page="galleryScripts.jsp" />

		<!--Java Scripts-->

    </head>
    <body>
    	<div id="gallery_header">
    		<div id="gallery_img">
    			<img src="images/doc.png" width="50"/>
    		</div>
    		<div id="gallery_header_name">
    			Document Collection
    		</div>
    		<div id="galSearchBar">
    			<input type="text" placeholder="Search Files in Gallery" id="galSearch" name="galSearch" size="30" onkeyup="ajaxSearch_keyword('application')">
    		</div>
    		<div id="galery_login_status_bar">
    			<!-- Login Status Bar -->
    			<jsp:include page="loginStatusBar.jsp" />
    		</div>
    	</div>
    	
    	<!-- Quick Menue -->
    	<jsp:include page="quickMenue.jsp" />
    	    	
    	<% String alphabet[] = {"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"}; %>
    	<div class="sort_panel">
    		<ul>
    			<li><a href="documentGallery.jsp">All</a></li>
    			<li style="margin:0px 8px;">|</li>
    		<% for(int i=0; i<alphabet.length; i++)
    			{ %>
	    		<li><a href="#" onclick="ajaxSearch_letter('<%=alphabet[i] %>','application')"><%=alphabet[i] %></a></li>
	    		<%} %>
    		</ul>
    	</div>
    	
    	<div id="grid">
    	<%
    	DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();
		Key accountKey = KeyFactory.createKey("AudioFiles", "mediaFiles");
		int rawByteSize;
		Query query = new Query("Audio", accountKey).
				addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).
				addSort("mediaName", Query.SortDirection.ASCENDING).
				addFilter("contentType", FilterOperator.EQUAL, "application");
		if (request.getParameter("album") != null) {
			query.addFilter("album", FilterOperator.EQUAL, (String)request.getParameter("album"));
		}
		if (request.getParameter("date") != null) {
			query.addFilter("dateCreated", FilterOperator.EQUAL, request.getParameter("date").toString());
		}
		List<Entity> uploadedDocumentFiles = datastore.prepare(query).asList(FetchOptions.Builder.withLimit(20));

			if (uploadedDocumentFiles.isEmpty()) {
				%>
				<div align="center" style="margin-top:200px;">
					<img src="images/doc.png" width="128" height="128"/> </br>
					<p style="font-size: 16px;">No Documents in the media vault to be viewed</p>
				</div>
				<%
			} else {
				%><div id="panel">
				<%
				for (Entity file: uploadedDocumentFiles) {
					String keyParameter = KeyFactory.keyToString(file.getKey());
					%>
					<div align="center" id="preview_file" onmouseover="showOptions(this)" onmouseout="hideOptions(this)">
						<div class="preview_doc"><img src="images/doc.png" width="100%" height="100%"/></div>
						<div id="file_info">
							<p>Name:<%= file.getProperty("mediaName") %></p>
							<p>Collection :	<%= file.getProperty("album") %></p>
							<p>Size :	<%= Integer.parseInt(file.getProperty("fileSize").toString())/1024 %> kB</p>
							<p>Date Created : <%= file.getProperty("dateCreated") %></p>
							<p>Media Type : <%= file.getProperty("contentType") %></p>
						</div>
						<div class="fileOptions">
							<a href="/download?entityKey=<%= keyParameter %>"><img src="images/download.png" alt="" /></a>
							<a href="/delete?entityKey=<%= keyParameter %>"><img src="images/trash_bin.png" alt="" /></a>
							<a href="#" onclick="update(this)"><img src="images/upload.png" alt="" /></a>
						</div>
						<div class="wrapper" style="display: none;" >
	    					<div id="updateBox"></div>
		   					<div id="updateFile">
								<h3>Update Document File</h3>
								<div id="leftSide">
									<img src="images/upload.png" alt="" style="width: 148px; height: 148px;" />
								</div>
								<form method="post" action="/update?entityKey=<%= keyParameter %>">
									<div class="inputSection">Media Name: <input id="mediaNameID" type="text" name="name" value="<%= file.getProperty("mediaName") %>" /></div>
									<div class="inputSection">Album: <input id="albumID" type="text" name="album" value="<%= file.getProperty("album") %>" /></div>
									<div style="float:left; margin:10px 20px 0px 0px;">
										<button type="submit" name="btnUpdate">Update Document</button>
									</div>
									<div style="float:left; margin-top:10px;">
										<button type="button" onClick="closePopUpWindow(this)">Cancel</button>
									</div>
								</form>
							</div>
						</div>
					</div>
					<%
				} %>
				</div>
				<%
			}
			%>
			</div>
			
			<%
			Query sortBarQuery = new Query("Audio", accountKey).
				addFilter("user", FilterOperator.EQUAL, (String)session.getAttribute("username")).
				addSort("album", Query.SortDirection.ASCENDING).
				addFilter("contentType", FilterOperator.EQUAL, "application");
			
			List<Entity> documentFiles = datastore.prepare(sortBarQuery).asList(FetchOptions.Builder.withLimit(40));
			List<String> albumList = new ArrayList<String>();
			List<String> dateList = new ArrayList<String>();
			
			for (Entity file : documentFiles) {
				if (!albumList.contains((String)file.getProperty("album"))) {
					albumList.add((String)file.getProperty("album"));
				}
				if (!dateList.contains(file.getProperty("dateCreated").toString())) {
					dateList.add(file.getProperty("dateCreated").toString());
				}
			}
			%>
			<div id="sort_bar">
				<h2>Sort By Collection</h2>
				<a href="/documentGallery.jsp">All Albums</a><br />
				<%
				for (String album: albumList) {
					%>
					<a href="/documentGallery.jsp?album=<%= album %>"><%= album %></a><br/>
					<%
				}
				%>
				<br />
				<h2>Sort By Date</h2>
				<a href="/documentGallery.jsp">All Dates</a><br />
				<%
				for (String date: dateList) {
					%>
					<a href="/documentGallery.jsp?date=<%= date %>"><%= date %></a><br/>
					<%
				}
				%>
			</div>
    </body>
</html>